﻿
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8" />
    <title>泡泡IM</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="generator" content="generator_to_replace">
    <link rel="shortcut icon" href="/static/favicon.ico" />
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" href="/static/h5/css/h5.css?v=1.1.70" />
</head>
<body>
    <!-- 欢迎画面 -->
    <div class="pop__panel pop__clearfix pop__welcome" id="welcome" v-show="popim.show=='welcome'">
        <div class="pop__main-page pop__flexbox">
            <div class="pop__center">
                <img src="/static/h5/img/logo.jpg">
            </div>
        </div>
    </div>

    <!-- 泡泡IM主容器 -->
    <div class="pop__panel pop__clearfix">
        <div class="pop__main-page pop__flexbox" id="home" v-show="popim.show=='home'">
            <!-- //顶部 -->
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <em class="pop__placeholder"></em>
                    <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>{{popim.setting.app_name}}</h2>
                    <em class="pop__placeholder"></em>
                </div>
            </div>

            <!-- //泡泡IM主页-->
            <div class="pop__body" v-show="tab=='chatting'">
                <div class="pop__scrolling-panel">
                    <div class="pop__chatting-list">
                        <div class="pop__warning-tip" v-show="stateName" @click="refresh">
                            <i class="pop__loading" v-show="popim.networkState=='connecting'"></i>{{stateName}}
                        </div>
                        <div class="pop__tip" v-show="!chattingItems.length">
                            没有消息
                        </div>
                        <ul class="pop__clearfix">
                            <template v-for="item in chattingItems">
                                <li class="pop__flexbox pop__cell" routeUrl="popim.baseUri+item.type+'/chat/'+item.id" key="item.type+''+item.id" @touchstart.capture="touchStart($event, item)" @touchmove.capture="touchMove($event, item)" @touchend.capture="touchEnd($event, item)" style="{transform: 'translate3d(-'+(item.slideDistance||0)+'rem,0,0)'}">
                                    <div class="pop__avatar"><img src="item.avatar" /><em class="pop__badge" v-if="item.unread_count!=0">{{item.unread_count}}</em></div>
                                    <div class="pop__chatting-info">
                                        <h2 class="pop__chatting-title pop__clamp1" v-html="item.name"></h2>
                                        <p class="pop__chatting-content pop__clamp1" v-html="lastMessage(item).content"></p>
                                    </div>
                                    <span class="pop__time" v-html="$formatTime(lastMessage(item).timestamp)" value="lastMessage(item).timestamp"></span>
                                    <div class="pop__chatting-delete pop__flexbox" @click.stop.capture="deleteItem($event, item)">删除</div>
                                </li>
                            </template>
                        </ul>
                    </div>
                </div>

            </div>

            <!-- 通讯录-->
            <div class="pop__body" v-show="tab=='friend'">
                <div class="pop__scrolling-panel">
                    <div class="pop__friend-list">
                        <div class="pop__warning-tip" v-show="stateName" @click="refresh">
                            {{stateName}}
                        </div>
                        <ul class="pop__clearfix">
                            <li>
                                <div class="pop__row pop__flexbox pop__flex-align-center pop__cell" routeUrl="popim.baseUri+'friend/search'" v-show="popim.setting.add_friend=='on'">
                                    <img class="pop__avatar-small" src="/static/h5/img/icon__add-friend.png" /><span class="pop__flex1">新的好友</span><label><em class="pop__badge" v-if="unreadApplyCount!=0">{{unreadApplyCount}}</em></label>
                                </div>
                                <div class="pop__row pop__flexbox pop__flex-align-center pop__cell" routeUrl="popim.baseUri+'group/list'">
                                    <img class="pop__avatar-small" src="/static/h5/img/icon__groups.png" /><span class="pop__flex1">群聊</span>
                                </div>
                                <template v-for="(items,key) in popim.friend">
                                    <h2 class="pop__friend-list-letter pop__border-top" class="'pop__firend_list_'+key||'other'">{{key||'#'}}</h2>
                                    <template v-for="item in items">
                                        <div class="pop__row pop__flexbox pop__flex-align-center pop__cell" uid="item.uid" routeURL="popim.baseUri+'user/detail/'+item.uid">
                                            <img class="pop__avatar-small" src="item.avatar"><span class="pop__flex1" v-html="item.remark || item.name"></span>
                                        </div>
                                    </template>
                                </template>
                            </li>
                        </ul>

                        <i v-show="popim.dataLoading" class="pop__loading"></i>

                    </div>
                </div>
                <!-- //字母显示 -->
                <div class="pop__friend-list-showletter">A</div>
                <!-- //26字母 -->
                <div class="pop__friend-list-floatletter">
                    <em v-for="char in ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#']" @click="scrollIntoView(char)">{{char}}</em>
                </div>
            </div>
            <!-- 探索-->
            <div class="pop__body" v-show="tab=='explore'">
                <div class="pop__scrolling-panel">
                    <div class="pop__explore-list">
                        <div class="pop__warning-tip" v-show="stateName" @click="refresh">
                            {{stateName}}
                        </div>
                        <ul class="pop__clearfix">

                            <li>
                                <div class="pop__explore-list-item pop__flexbox pop__flex-align-center pop__cell">
                                    <div class="pop__icon layui-icon">&#xe756;</div><span class="pop__flex1" @click="showTestInfo">看一看</span><div class="pop__arr"></div>
                                </div>
                            </li>

                            <li>

                                <div class="pop__explore-list-item pop__flexbox pop__flex-align-center pop__cell">
                                    <div class="pop__icon layui-icon">&#xe628;</div><span class="pop__flex1" @click="showTestInfo">搜一搜</span><div class="pop__arr"></div>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <!-- 我-->
            <div class="pop__body" v-show="tab=='mine'">
                <div class="pop__scrolling-panel">
                    <div class="pop__mine-info-list">
                        <div class="pop__warning-tip" v-show="stateName" @click="refresh">
                            {{stateName}}
                        </div>
                        <ul class="pop__clearfix">
                            <li>
                                <div class="pop__mine-info-item pop__flexbox pop__flex-align-center pop__cell" routeUrl="popim.baseUri+'mine/detail'">
                                    <img class="pop__avatar" src="popim.mine.avatar" />
                                    <span class="pop__name pop__flex1">
                                        <em v-html="popim.mine.nickname"></em><i v-html="popim.setting.app_name+'号：'+popim.mine.username"></i>
                                    </span>
                                    <div class="pop__arr"></div>
                                </div>
                            </li>

                            <li>
                                <div class="pop__mine-info-item pop__flexbox pop__flex-align-center pop__cell" routeUrl="popim.baseUri+'setting/others'">
                                    <div class="pop__icon layui-icon">&#xe620;</div><span class="pop__flex1">设置</span><div class="pop__arr"></div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- //底部footer -->
            <div class="pop__footer">
                <div class="pop__footer-wrapper pop__border-top">
                    <ul class="pop__flexbox pop__flex-align-center">

                        <li class="pop__flex1" class="{'pop__icon-selected':tab=='chatting'}" @click="tab='chatting'"><i class="pop__ico layui-icon pop__icon-chatting">&#xe611;
                        <template v-if="unreadMessageCount!=0">
                            <em class="pop__badge">{{unreadMessageCount}}</em>
                        </template></i><span>消息</span></li>

                        <li class="pop__flex1" class="{'pop__icon-selected':tab=='friend'}" @click="tab='friend'"><i class="pop__ico layui-icon pop__icon-friends">&#xe613;
                        <template v-if="unreadApplyCount!=0">
                            <em class="pop__badge">{{unreadApplyCount}}</em>
                        </template></i><span>通讯录</span></li>

                        <li class="pop__flex1" class="{'pop__icon-selected':tab=='explore'}" @click="tab='explore'"><i class="pop__ico layui-icon pop__icon-explore">&#xe670;<em class="pop__badge pop__badge-dot"></em></i><span>探索</span></li>

                        <li class="pop__flex1" class="{'pop__icon-selected':tab=='mine'}" @click="tab='mine'"><i class="pop__ico layui-icon pop__icon-mine">&#xe612;</i><span>我</span></li>

                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 聊天容器 -->
    <div class="pop__panel pop__clearfix" id="chat" style="display:none" v-show="popim.show=='chat'" @touchstart="touchStart">
        <div class="pop__chat-wrapper pop__flexbox">
            <!-- //顶部 -->
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                    <h2 class="pop__header-title pop__flex1 pop__clamp1" v-html="name"></h2>
                    <a class="pop__dot-more" href="popim.baseUri+(type=='group'?type:'user')+'/detail/'+id"></a>
                </div>
            </div>
            <!-- //泡泡IM消息上墙面板 -->
            <div class="pop__chat-msg-panel pop__flex1" @scroll.passive="handleScroll">
                <div class="pop__chat-content">
                    <ul class="pop__clearfix" @click="closePanel">
                        <li class="pop__chat-msg-notice" v-show="messageLock && !messageEnd"><span><i class="pop__loading"></i>加载中...</span></li>
                        <li class="pop__chat-msg-notice" v-show="messageEnd"><span>没有更多消息</span></li>
                        <template v-for="item in messageList">
                            <li v-if="needInsertTime(item.timestamp)" class="pop__chat-msg-time"><span>{{$date(item.timestamp)}}</span></li>
                            <chat-message type="type"
                                          from="item.from"
                                          name="item.name"
                                          content="item.content"
                                          avatar="item.avatar"
                                          mid="item.mid"
                                          sub_type="item.sub_type"
                                          timestamp="item.timestamp"
                                          popim="popim">
                            </chat-message>
                        </template>

                        <!-- 长按提示 -->
                        <div class="pop__chat-tap-menu" style="{left:tapMenuLeft, top:tapMenuTop}" v-show="tapMenuShow&&(supportCopy||supportRevoke)" ref="menu">
                            <div class="pop__menu">
                                <a href="javascript:void(0);" @click="copy" v-show="supportCopy"><i class="pop__icon-copy"></i>复制</a>
                                <a href="javascript:void(0);" @click="revoke" v-show="supportRevoke"><i class="pop__icon-revoke"></i>撤回</a>
                            </div>
                        </div>

                        <!-- 录音提示 -->
                        <div class="pop__chat-voice-tip" v-show="voiceTips&&voice" @click="cancelVoice">
                            <div class="pop__line-scale-pulse-out" v-show="voiceTips=='手指上划，取消发送'">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="pop__cross" v-show="voiceTips=='松开手指，取消发送'"></div>
                            <div class="{pop__warning:voiceTips=='松开手指，取消发送'}">{{voiceTips}}</div>
                        </div>
                    </ul>
                </div>
            </div>

            <!-- //泡泡IM底部功能面板 -->
            <div class="pop__chat-tool-panel">
                <!-- 输入框模块 -->
                <div class="pop__editor-panel pop__border-top pop__flexbox">
                    <i v-show="!voice && popim.setting.voice=='on'" class="pop__btn pop__btn-voice" @click.prevent="toggleVoice"></i>
                    <i v-show="voice && popim.setting.voice=='on'" class="pop__btn pop__btn-keyboard" @click.prevent="toggleVoice"></i>
                    <input v-show="!voice" class="pop__chat-tool-editor pop__user-select" v-model="message" @focus="scrollBottom" ref="input" style="{width:inputWidth}" @keyup.13="send" @blur="resizeWindow" @paste="paste" />
                    <input v-show="voice" class="pop__chat-tool-editor pop__none-user-select" type="button" @touchstart.prevent="beginVoiceRecord" @touchend="sendVoice" @touchmove.prevent="cancelVoice" class="{'pop__chat-tool-pressing':voiceTips}" value="voiceBtnTips" style="{width:inputWidth}" @contextmenu.prevent.self />
                    <i class="pop__btn pop__btn-emotion" @click.prevent="openEmotion" v-show="popim.setting.emoji=='on'"></i>
                    <i style="{visibility:!message}" class="pop__btn pop__btn-choose" @click.prevent="openFunction"></i>
                    <button v-if="message!=''" class="pop__btn-submit" @click="send">发送</button>
                </div>

                <!-- 表情、选择模块 -->
                <div class="pop__choose-panel pop__border-top" v-show="panel=='face'||panel=='function'">
                    <!-- 表情区域 -->
                    <div class="pop__emotion-wrapper" v-show="panel=='face'">
                        <div class="pop__emotion__cells pop__flexbox">
                            <div class="pop__emotion__cells-swiper pop__flex1">
                                <div class="swiper-container" id="pop__emotion" @click="selectEmotion">
                                    <div class="swiper-wrapper">

                                    </div>
                                    <div class="pop__emotion-pagination"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 选择区域 -->
                    <div class="pop__choose-wrapper" v-show="panel=='function'">
                        <ul class="pop__clearfix">
                            <li v-show="popim.setting.upload_img=='on'"><a href="javascript:;"><span class="pop__avatar"><i class="layui-icon layui-icon-image">&#xe60d;</i><form><input type="file" accept="image/*" @change="uploadImage" /></form></span><em>照片</em></a></li>
                            <li v-show="popim.setting.upload_file=='on'"><a href="javascript:;"><span class="pop__avatar"><i class="layui-icon">&#xe621;</i><form><input type="file" accept="*" @change="uploadFile" /></form></span><em>文件</em></a></li>
                            <!--<li><a href="javascript:;"><span class="pop__avatar"><i class="layui-icon">&#xe65e;</i></span><em>红包</em></a></li>-->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 所有群组 -->
    <div class="pop__panel pop__clearfix" id="group_list" v-show="popim.show=='group_list'">
        <div class="pop__main-page pop__flexbox">
            <!-- //顶部 -->
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                    <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>所有群聊</h2>
                    <em class="pop__placeholder"></em>
                </div>
            </div>

            <div class="pop__body">
                <div class="pop__scrolling-panel">
                    <div class="pop__friend-list">
                        <ul class="pop__clearfix">
                            <li>
                                <div class="pop__row pop__flexbox pop__flex-align-center pop__cell" routeUrl="popim.baseUri+'group/create'" v-show="popim.setting.create_group=='on'">
                                    <img class="pop__avatar-small" src="/static/h5/img/icon__create-group.png" /><span class="pop__flex1">创建群聊</span>
                                </div>
                                <h2></h2>
                                <template v-for="item in popim.group">
                                    <div class="pop__row pop__flexbox pop__flex-align-center pop__cell" routeURL="popim.baseUri+'group/chat/'+item.gid">
                                        <img class="pop__avatar-small" src="item.avatar"><span class="pop__flex1" v-html="item.remark || item.name"></span>
                                    </div>
                                </template>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- 图片预览弹窗 -->
    <div class="pop__img-view" style="display: none;">
        <div class="swiper-container pop__img-view-container">
            <div class="swiper-wrapper"></div>
        </div>
    </div>

    <!-- 视频播放 -->
    <div class="pop__video-view" style="display: none;">
        <i class="pop__close"></i>
        <video id="pop__video" width="100%" height="100%" controls="controls" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline preload="auto"></video>
    </div>

    <!-- 用户信息详情 -->
    <div class="pop__panel pop__clearfix" id="user_detail" style="display: none;" v-show="popim.show=='user_detail'">
        <div class="pop__main-page pop__flexbox">
            <!-- //顶部 -->
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                    <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>详细资料</h2>
                    <em class="pop__placeholder"></em>
                </div>
            </div>

            <!-- //好友详细资料页 -->
            <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <img class="pop__avatar" src="avatar" />
                            <label class="pop__detail-item-left pop__flex1">
                                <em v-html="remarkname||nickname"></em><i v-show="remarkname" v-html="nickname"></i><i v-html="username"></i>
                            </label>
                        </div>
                    </li>
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <span class="pop__detail-item-left">个性签名</span>
                            <span class="pop__flex1 section" v-html="sign"></span>
                        </div>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell" v-show="isFriend" style="display:none" routeUrl="popim.baseUri+'friend/remark/'+uid">
                            <span class="pop__detail-item-left pop__flex1">
                                设置备注
                            </span>
                            <div class="pop__arr"></div>
                        </div>
                    </li>

                    <li>
                        <div v-if="gid" class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell" routeUrl="popim.baseUri+'group/forbidden/'+gid+'/'+uid">
                            <span class="pop__detail-item-left pop__flex1">
                                群内禁言
                            </span>
                            <div class="pop__arr"></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="pop__btns-panel">
                <a class="pop__btn-primary" v-show="accountState == 'normal' && uid && !isFriend && uid!=popim.mine.uid" href="popim.baseUri+'friend/send_apply/'+uid">发起好友申请</a>
                <a class="pop__btn-primary" href="javascript:;" v-show="accountState == 'normal' && isFriend" @click="chat">发消息</a>
                <a class="pop__btn-warning" href="javascript:;" v-show="accountState == 'normal' && isFriend" @click="deleteFriend">删除好友</a>
            </div>

        </div>
    </div>

    <!-- 我的信息详情 -->
    <div class="pop__panel pop__clearfix" id="mine_detail" style="display: none;" v-show="popim.show=='mine_detail'">
        <div class="pop__main-page pop__flexbox">
            <!-- //顶部 -->
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                    <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>个人信息</h2>
                    <em class="pop__placeholder"></em>
                </div>
            </div>

            <!-- //个人信息页 -->
            <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell" routeUrl="popim.baseUri+'setting/avatar'">
                            <label class="pop__detail-item-left pop__flex1">头像</label>
                            <img class="pop__avatar" src="popim.mine.avatar" />
                            <div class="pop__arr"></div>
                        </div>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <label class="pop__detail-item-left pop__flex1">{{popim.setting.app_name}}号</label>
                            <div class="pop__detail-item-right" v-html="popim.mine.username"></div>
                        </div>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell" routeUrl="popim.baseUri+'setting/nickname'">
                            <label class="pop__detail-item-left pop__flex1">昵称</label>
                            <div class="pop__detail-item-right" v-html="popim.mine.nickname"></div>
                            <div class="pop__arr"></div>
                        </div>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell" routeUrl="popim.baseUri+'setting/sign'">
                            <label class="pop__detail-item-left pop__flex1">个性签名</label>
                            <div class="pop__detail-item-right" v-html="popim.mine.sign"></div>
                            <div class="pop__arr"></div>
                        </div>

                    </li>
                </ul>
            </div>

        </div>
    </div>

    <!-- 群组详情 -->
    <div class="pop__panel pop__clearfix" id="group_detail" style="display: none;" v-show="popim.show=='group_detail'">
        <div class="pop__main-page pop__flexbox">
            <!-- //顶部 -->
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                    <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>详细资料</h2>
                    <em class="pop__placeholder"></em>
                </div>
            </div>

            <!-- //群详细资料页 -->
            <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-wrap pop__flex-align-center pop__cell">
                            <template v-for="item in members">
                                <div class="pop__avatar" routeUrl="avatarLink(item.uid)">
                                    <img src="item.avatar" /><span v-html="item.remark||item.nickname"></span>
                                </div>
                            </template>
                            <div class="pop__avatar" routeUrl="popim.baseUri+'group/memberadd/'+gid">
                                <div class="pop__operation-adduser pop__operation-icon"></div>
                            </div>
                            <div class="pop__avatar" routeUrl="popim.baseUri+'group/memberdel/'+gid"
                                 v-if="uid==popim.mine.uid">
                                <div class="pop__operation-deluser pop__operation-icon"></div>
                            </div>
                            <div class="pop__more-item pop__flex1 pop__flexbox pop__flex-align-center pop__flex-justify-center pop__cell"
                                 routeUrl="popim.baseUri+'group/members/'+gid">
                                <div class="pop__more">
                                    <span>
                                        查看更多群成员
                                    </span>
                                    <span class="pop__arr"></span>
                                </div>
                            </div>
                        </div>

                    </li>
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell" routeUrl="popim.baseUri+'group/'+(uid==popim.mine.uid ? 'rename' : 'remark')+'/'+gid">
                            <span class="pop__detail-item-left">
                                {{uid==popim.mine.uid ? '群聊名称' : '备注名称'}}
                            </span>
                            <span class="pop__detail-section pop__flex1" v-html="uid==popim.mine.uid ? groupname : remark || groupname"></span>
                            <div class="pop__arr"></div>
                        </div>
                    </li>
                    <li v-show="uid == popim.mine.uid">
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <span class="pop__flex1">全员禁言</span>
                            <div class="pop__input-block">
                                <input type="checkbox" v-model="forbid_speaking">
                                <div class="pop__unselect pop__form-switch" class="{'pop__form-onswitch':forbid_speaking==1}" @click="toggleForbidSpeaking()">
                                    <em>{{forbid_speaking==1 ? 'ON' : 'OFF'}}</em><i></i>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="pop__btns-panel">
                <a v-if="uid!=popim.mine.uid" class="pop__btn-warning" href="javascript:;" @click="leaveGroup">删除并退出</a>
                <a v-if="uid==popim.mine.uid" class="pop__btn-warning" href="javascript:;" @click="deleteGroup">解散群组</a>
            </div>
        </div>
    </div>

    <!-- 群组成员 -->
    <div class="pop__panel pop__clearfix" id="group_members" style="display: none;" v-show="popim.show=='group_members'">
        <div class="pop__main-page pop__flexbox">
            <!-- //顶部 -->
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                    <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>群成员</h2>
                    <em class="pop__placeholder"></em>
                </div>
            </div>

            <!-- //群详细资料页 -->
            <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-wrap pop__flex-align-center pop__cell">
                            <template v-for="item in members">
                                <div class="pop__avatar" routeUrl="avatarLink(item.uid)" key="item.uid"><img src="item.avatar" /><span v-html="item.remark||item.nickname"></span></div>
                            </template>
                            <div class="pop__more-item pop__flex1 pop__flexbox pop__flex-align-center pop__flex-justify-center pop__cell" @click="nextPage">
                                <div class="pop__more">
                                    <span>
                                        {{!ended?'加载更多':'没有更多成员'}}
                                    </span>
                                    <span class="pop__arr" v-show="!ended&&!popim.dataLoading"></span>
                                    <i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 好友申请详情 -->
    <div class="pop__panel pop__clearfix" id="apply_detail" style="display: none;" v-show="popim.show=='apply_detail'">
        <div class="pop__main-page pop__flexbox">
            <!-- //顶部 -->
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                    <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>详细资料</h2>
                    <em class="pop__placeholder"></em>
                </div>
            </div>

            <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <img class="pop__avatar" src="avatar" />
                            <label class="pop__detail-item-left pop__flex1">
                                <em v-html="nickname"></em><i v-html="username"></i>
                            </label>
                        </div>
                    </li>
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <label class="pop__detail-item-left">附言:</label>
                            <div class="pop__detail-item-right" v-html="postScript"></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="pop__btns-panel">
                <a class="pop__btn-primary" href="javascript:;" v-if="operation=='not_operated'" @click="agree">同意申请</a>
                <a class="pop__btn-default" href="javascript:;" v-if="operation=='not_operated'" @click="refuse">拒绝申请</a>
            </div>

        </div>
    </div>

    <!-- 登录页面 -->
    <div class="pop__panel pop__clearfix" id="login" style="display:none;" v-show="popim.show=='login'">
        <div class="pop__form-cells">
            <h2 class="pop__form-title">登录{{popim.setting.app_name}}</h2>
            <form action="post" @keyup.13="login">
                <div class="pop__form-cell">
                    <div><label class="pop__form-label">账号</label></div>
                    <div class="pop__flex1">
                        <input class="pop__form-input" name="username" v-model="username" type="text" placeholder="请输入账号">
                    </div>
                </div>
                <div class="pop__form-cell">
                    <div><label class="pop__form-label">密码</label></div>
                    <div class="pop__flex1">
                        <input class="pop__form-input" name="password" v-model="password" type="password" placeholder="请输入密码">
                    </div>
                </div>
                <div class="pop__form-cell" v-if="popim.setting.login_captcha=='on'">
                    <div><label class="pop__form-label">验证码</label></div>
                    <div class="pop__flex1">
                        <input class="pop__form-input" type="text" v-model="captcha" placeholder="输入验证码">
                    </div>
                    <div>
                        <img class="pop__form-captcha" src="popim.api.loginCaptcha" @click="switchCaptcha" ref="captchaImg">
                    </div>
                </div>
                <div class="pop__form-link" v-show="popim.setting.register=='on'"><a href="popim.baseUri+'user/join'">注册账号</a></div>
                <div class="pop__form-btn"><a class="pop__btn-primary btn__login" @click="login" href="javascript:;">登录</a></div>
            </form>
        </div>
    </div>

    <!-- 注册页面 -->
    <div class="pop__panel pop__clearfix" id="join" style="display:none;" v-show="popim.show=='join'">
        <div class="pop__form-cells">
            <h2 class="pop__form-title">注册{{popim.setting.app_name}}</h2>
            <form action="post" @keyup.13="join">
                <div class="pop__form-cell">
                    <div><label class="pop__form-label">账号</label></div>
                    <div class="pop__flex1">
                        <input class="pop__form-input" name="username" v-model="username" type="text" placeholder="请输入账号，字母及数字的组合">
                    </div>
                </div>
                <div class="pop__form-cell">
                    <div><label class="pop__form-label">密码</label></div>
                    <div class="pop__flex1">
                        <input class="pop__form-input" name="password" v-model="password" type="password" placeholder="请输入密码">
                    </div>
                </div>
                <div class="pop__form-cell">
                    <div><label class="pop__form-label">昵称</label></div>
                    <div class="pop__flex1">
                        <input class="pop__form-input" name="nickname" v-model="nickname" type="text" placeholder="请输入昵称">
                    </div>
                </div>
                <div class="pop__form-cell">
                    <div><label class="pop__form-label">个性签名</label></div>
                    <div class="pop__flex1">
                        <input class="pop__form-input" name="sign" v-model="sign" type="text" placeholder="请输入个性签名">
                    </div>
                </div>
                <div class="pop__form-cell" v-if="popim.setting.register_captcha == 'on'">
                    <div><label class="pop__form-label">验证码</label></div>
                    <div class="pop__flex1">
                        <input class="pop__form-input" type="text" v-model="captcha" placeholder="输入验证码">
                    </div>
                    <div>
                        <img class="pop__form-captcha" src="popim.api.joinCaptcha" @click="switchCaptcha" ref="captchaImg">
                    </div>
                </div>
                <div class="pop__form-link"><a href="popim.baseUri+'user/login'">已经有账号，点击这里登录</a></div>
                <div class="pop__form-btn"><a class="pop__btn-primary btn__login" @click="join" href="javascript:;">注册</a></div>
            </form>
        </div>
    </div>

    <!-- 加好友发送附言，设置备注等 -->
    <div class="pop__panel pop__clearfix" id="setting" style="display: none;" v-show="popim.show=='setting'">
        <div class="pop__header">
            <div class="pop__header-wrapper pop__flexbox">
                <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>{{title}}</h2>
                <em class="pop__confirm-button">
                    <a href="javascript:;" class="pop__btn-primary-mini" @click="action">确定</a>
                </em>
            </div>
        </div>
        <div class="pop__main-page pop__flexbox">
            <div class="pop__flex1">
                <div class="pop__gray-text" v-html="desc"></div>
                <ul class="pop__clearfix">
                    <li><label class="pop__flexbox"><input class="pop__input pop__flex1" type="text" v-model="content" /></label></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 添加朋友 -->
    <div class="pop__panel pop__clearfix" id="search" style="display: none;" v-show="popim.show=='search'">
        <div class="pop__header">
            <div class="pop__header-wrapper pop__flexbox">
                <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>添加朋友</h2>
                <em class="pop__placeholder"></em>
            </div>
        </div>
        <div class="pop__scrolling-panel">
            <div class="pop__friend-list">
                <ul class="pop__clearfix">
                    <li>
                        <div class="pop__search-bar" class="{'pop__search-bar-focusing':!showApplyList}">
                            <div class="pop__search-bar-form">
                                <div class="pop__search-bar-box">
                                    <i class="pop__icon-search"></i>
                                    <input type="text" class="pop__search-bar-input" pop__placeholder="输入对方账号" v-model="searchText" required="" @blur="blur" ref="input" />
                                    <a href="javascript:" class="pop__icon-clear" @click="clear"></a>
                                </div>
                                <label class="pop__search-bar-label" @click="focus">
                                    <i class="pop__icon-search"></i>
                                    <span>输入对方账号</span>
                                </label>
                            </div>
                            <a href="javascript:" class="pop__search-bar-cancel-btn" @click="cancel">取消</a>
                        </div>
                    </li>
                    <li v-show="showApplyList">
                        <template v-for="item in applyList">
                            <div class="pop__row pop__flexbox pop__flex-align-center pop__cell" routeUrl="popim.baseUri+'apply/detail/'+item.nid">
                                <img class="pop__avatar-small" src="item.avatar"><span class="pop__flex1" v-html="item.nickname"></span><span class="pop__friend-list-operation" v-html="operationName(item.operation)"></span>
                            </div>
                        </template>
                    </li>
                    <li v-show="!showApplyList&&searchText">
                        <div class="pop__row pop__flexbox pop__flex-align-center pop__cell" @click="search">
                            <img class="pop__avatar-small" src="/static/h5/img/search-text.png"><span class="pop__flex1"><b>搜索</b>：<span class="pop__green">{{searchText}}</span></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 群成员操作 -->
    <div class="pop__panel pop__clearfix" id="group_member_operation" style="display: none;" v-show="popim.show=='group_member_operation'">
        <div class="pop__header">
            <div class="pop__header-wrapper pop__flexbox">
                <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>选择联系人</h2>
                <em class="pop__confirm-button-fixed">
                    <button class="pop__btn-primary-mini" disabled="!selectedItems.length" @click="action">完成{{selectedItems.length ? '('+selectedItems.length+')' : ''}}</button>
                </em>
            </div>
        </div>
        <div class="pop__body">
            <div class="pop__scrolling-panel">
                <div class="pop__friend-list">
                    <ul class="pop__clearfix pop__cells_checkbox">
                        <li>
                            <form ref="form">
                                <template v-for="(items,key) in members">
                                    <h2 class="pop__friend-list-letter pop__border-top" class="'pop__firend_list_'+key||'other'">{{key||'#'}}</h2>
                                    <template v-for="item in items">
                                        <label class="pop__row pop__flexbox pop__flex-align-center pop__cell pop__check-label">
                                            <input type="checkbox" class="pop__check" v-model="selectedItems" value="item.uid">
                                            <i class="pop__icon-checked"></i>
                                            <img class="pop__avatar-small" src="item.avatar"><span class="pop__clamp1 pop__flex1" v-html="item.name||item.remark||item.nickname"></span>
                                        </label>
                                    </template>
                                </template>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- //字母显示 -->
            <div class="pop__friend-list-showletter">A</div>
            <!-- //26字母 -->
            <div class="pop__friend-list-floatletter">
                <em v-for="char in ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#']" @click="scrollIntoView(char)">{{char}}</em>
            </div>
        </div>

    </div>

    <!-- 群内禁言 -->
    <div class="pop__panel pop__clearfix" id="forbidden" style="display: none;" v-show="popim.show=='forbidden'">
        <div class="pop__header">
            <div class="pop__header-wrapper pop__flexbox">
                <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>选择禁言时长</h2>
                <em class="pop__confirm-button">
                    <button class="pop__btn-primary-mini" @click="action" disabled="!selectedValue">完成</button>
                </em>
            </div>
        </div>

        <div class="pop__scrolling-panel">
            <div class="pop__friend-list">
                <ul class="pop__clearfix pop__cells_checkbox">
                    <li>
                        <form ref="form">
                            <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" class="pop__check" v-model="selectedValue" value="-1">
                                <i class="pop__icon-checked"></i>解除禁言
                            </label>
                            <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" class="pop__check" v-model="selectedValue" value="600">
                                <i class="pop__icon-checked"></i>10分钟
                            </label>
                            <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" class="pop__check" v-model="selectedValue" value="3600">
                                <i class="pop__icon-checked"></i>1小时
                            </label>
                            <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" class="pop__check" v-model="selectedValue" value="43200">
                                <i class="pop__icon-checked"></i>12小时
                            </label>
                            <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" class="pop__check" v-model="selectedValue" value="86400">
                                <i class="pop__icon-checked"></i>1天
                            </label>
                            <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" class="pop__check" v-model="selectedValue" value="259200">
                                <i class="pop__icon-checked"></i>3天
                            </label>
                            <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" class="pop__check" v-model="selectedValue" value="604800">
                                <i class="pop__icon-checked"></i>7天
                            </label>
                            <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" class="pop__check" v-model="selectedValue" value="1296000">
                                <i class="pop__icon-checked"></i>15天
                            </label>
                            <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" class="pop__check" v-model="selectedValue" value="2592000">
                                <i class="pop__icon-checked"></i>30天
                            </label>
                        </form>
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <!-- 头像设置 -->
    <div class="pop__panel pop__clearfix" id="set_avatar" style="display: none;" v-show="popim.show=='set_avatar'">
        <div class="pop__main-page pop__flexbox">
            <!-- //顶部 -->
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                    <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>个人头像</h2>
                    <a class="pop__dot-more"><form><input class="pop__input-choose-avatar" type="file" accept="image/*" @change="uploadAvatar" /></form></a>
                </div>
            </div>
            <div class="pop__center">
                <img class="pop__avatar" src="popim.mine.avatar">
            </div>
        </div>
    </div>

    <!-- 设置相关 -->
    <div class="pop__panel pop__clearfix" id="setting_others" style="display: none;" v-show="popim.show=='setting_others'">
        <div class="pop__main-page pop__flexbox">
            <!-- //顶部 -->
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a class="pop__header-back" href="javascript:;" onclick="history.back(-1);"></a>
                    <h2 class="pop__header-title pop__flex1"><i v-show="popim.dataLoading" class="pop__loading pop__loading-head"></i>设置</h2>
                    <em class="pop__placeholder"></em>
                </div>
            </div>

            <!-- //设置相关 -->
            <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li>
                        <div class="pop__detail-item pop__margin-top pop__text-center pop__input">
                            <label class="pop__detail-item-left pop__flex1" @click="logout">退出</label>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
    </div>

    <!-- 提示框 -->
    <div class="pop__panel" id="dialog" style="display: none;" v-show="show">
        <div class="pop__mask"></div>
        <div class="pop__dialog">
            <div class="pop__dialog__bd">{{content}}</div>
            <div class="pop__dialog__ft">
                <a href="javascript:;" class="pop__dialog__btn pop__dialog__btn_primary" @click="show=false" v-show="!callback">知道了</a>
                <a href="javascript:;" class="pop__dialog__btn pop__dialog__btn_default" @click="show=false" v-show="callback">取消</a>
                <a href="javascript:;" class="pop__dialog__btn pop__dialog__btn_primary" @click.prevent="action" v-show="callback">确定</a>
            </div>
        </div>
    </div>

    <!-- 操作提示 -->
    <div class="pop__panel" id="actionsheet">
        <div class="pop__mask" style="display:none;" v-show="show" @click="cancel"></div>
        <div class="pop__actionsheet" class="{'pop__actionsheet_toggle':show}">
            <div class="pop__actionsheet__title">
                <p class="pop__actionsheet__title-text" v-html="content"></p>
            </div>
            <div class="pop__actionsheet__menu">
                <div class="pop__actionsheet__cell" @click="action" class="{'pop__indianred':warning}">确认</div>
            </div>
            <div class="pop__actionsheet__action">
                <div class="pop__actionsheet__cell" @click="cancel">取消</div>
            </div>
        </div>
    </div>

    <div class="pop__panel" id="toast" style="display: none;" v-show="dataPosting">
        <div class="pop__toast">
            <i class="pop__icon_toast" class="{pop__loading:dataPosting==1, 'pop__icon-success-no-circle':dataPosting==2}"></i>
            <p class="pop__toast__content">{{dataPosting == 2?'操作成功':'提交中...'}}</p>
        </div>
    </div>

    <script src="/static/h5/js/zepto.min.js"></script>
    <!--<script src="/static/h5/js/page.js"></script>-->
    <script src="/static/h5/js/page.min.js"></script>
    <!--<script src="/static/h5/js/vue.js"></script>-->
    <script src="/static/h5/js/vue.min.js"></script>
    <script src="/static/h5/js/fontSize.js"></script>
    <script src="/static/h5/js/woker/woker.js?v=3.2"></script>
    <script src="/static/h5/js/pop_function.js?v=3.1.1"></script>
    <script src="/static/h5/js/h5.min.js?v=3.3.39"></script>

    <script>
        (function () {
            var src = '/static/h5/js/eruda.min.js';
            if (!/debug/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
            document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
            document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
        })();
        $(function () {
            var js = document.createElement("script");
            js.src = "/static/h5/js/swiper-3.4.1.min.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(js, s);
        });
        $(function () {
            var style = document.createElement("link");
            style.href = '/static/h5/css/swiper-3.4.1.min.css';
            style.rel = 'stylesheet';
            style.type = 'text/css';
            var s = document.getElementsByTagName("link")[0];
            s.parentNode.insertBefore(style, s);
        });
        $(function () {
            var js = document.createElement("script");
            js.src = "/static/h5/js/webrtc/recorder.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(js, s);
        });

    </script>

</body>
</html>
